<!--
 * 徽标
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-badge" :class="classes" :style="styles">
        <text class="pure-badge-value">{{ formatValue }}</text>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        computed: {
            // classes
            classes() {
                const classes = [];

                // 圆点模式
                if (this.mode === "dot") classes.push("pure-badge-dot");

                // absolute 定位
                if (this.absolute) classes.push("pure-badge-absolute");

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 格式化后的值
            formatValue() {
                // 未设置显示模式
                if (!this.mode) return this.value;

                // 圆点模式
                if (this.mode === "dot") return "";

                // 溢出模式
                if (this.mode === "overflow") {
                    const valueNumber = Number(this.value);
                    const maxNumber = Number(this.max);

                    // 未超出
                    if (valueNumber <= maxNumber) {
                        return valueNumber;
                    }
                    // 超出了
                    return maxNumber + this.suffix;
                }

                // 切割模式
                if (this.mode === "limit") {
                    const valueNumber = Number(this.value);
                    const limitValueNumber = Number(this.max);
                    const decimalLengthNumber = Number(this.decimal);

                    // 未超出
                    if (valueNumber <= limitValueNumber) {
                        return valueNumber;
                    }

                    // 超出了
                    const floatValue = (valueNumber / limitValueNumber).toFixed(decimalLengthNumber);
                    return floatValue + this.suffix;
                }
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
